<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@include file="../WEB-INF/jspf/controlesessao.jspf"%>

<fmt:parseDate value="${param.data_inicio}" var="data_inicio" pattern="dd/MM/yyyy"/>
<fmt:parseDate value="${param.data_fim}" var="data_fim" pattern="dd/MM/yyyy"/>

<fmt:formatDate value="${data_inicio}" var="ano_inicio"  pattern="yyyy"/>
<fmt:formatDate value="${data_inicio}" var="mes_inicio"  pattern="MM"/>

<c:if test="${!empty param.id_unidade}">
    <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
        select a.id_alocacao, a.id_turma,
        a.data_alocacao,
        hora_inicio,
        hora_fim ,
        c.nome_curso, o.desc_componente,
        d.nome as nome,
        s.desc_sala
        from Alocacoes a
        inner join salas s on a.id_sala=s.id_sala
        inner join Turmas  t on a.id_turma=t.id_turma
        inner join turnos h on t.id_turno=h.id_turno
        inner join Cursos c on c.id_curso=t.id_curso
        inner join Componentes o on o.id_componente=a.id_componente
        inner join Docentes d on d.matricula=a.matricula
        where 1=1
        <c:if test="${!empty param.id_unidade}">
            and s.id_unidade=?
            <sql:param value="${param.id_unidade}"/>
        </c:if>
        <c:if test="${!empty param.id_sala}">
            and a.id_sala=?
            <sql:param value="${param.id_sala}"/>
        </c:if>
        <c:if test="${!empty param.id_turno}">
            and t.id_turno=?
            <sql:param value="${param.id_turno}"/>
        </c:if>
        and a.data_alocacao between ? and ?
        <sql:dateParam value="${data_inicio}"/>
        <sql:dateParam value="${data_fim}"/>
        order by a.data_alocacao
    </sql:query>
</c:if>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='../css/fullcalendar.css' />
        <link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.2.custom.css">
        <script type='text/javascript' src='../js/jquery.js'></script>
        <script type='text/javascript' src='../js/jquery-ui-1.8.2.custom.min.js'></script>
        <script type='text/javascript' src='../js/fullcalendar.js'></script>
        <script type="text/javascript" src="../js/jquery.ui.datepicker-pt-BR.js" ></script>
        <script type='text/javascript'>

            $(document).ready(function() {

                var calendar  = $('#calendar');

                calendar.fullCalendar({
                    header: {
                        center: 'title',
                        right: 'prev,next today',
                        left:'month,agendaWeek,agendaDay'
                    },
                    timeFormat:'HH:mm:ss',
                    selectable: true,
                    selectHelper: true,
                    select: function(start, end, allDay) {
                        // $("#evento").dialog("open");
                    },
                    editable: true,
                    events:

                        [
                <c:forEach var="row" items="${query.rows}">


                    <fmt:setLocale value="en-US"/>
                    <fmt:formatDate value="${row.data_alocacao}" var="ano" pattern="yyyy"/>
                    <fmt:formatDate value="${row.data_alocacao}" var="mes"  pattern="MMM" timeZone="America/Los_Angeles"/>
                    <fmt:formatDate value="${row.data_alocacao}" var="dia" pattern="dd"/>
                                    {id: ${row.id_alocacao},
                                        title:'${row.desc_sala} - ${row.nome_curso} - ${row.desc_componente}',
                                        start:new Date('${mes} ${dia}, ${ano} ${row.hora_inicio}:00'),
                                        end:new Date('${mes} ${dia}, ${ano} ${row.hora_fim}:00'),
                                        allDay:false
                                    },
                </c:forEach>
                                {

                                }
                            ]
                            ,
                            eventDrop: function(event, delta) {

                            },
                            eventClick: function(event) {
                                return false;
                            },
                            loading: function(bool) {
                                if (bool) $('#loading').show();
                                else $('#loading').hide();
                            }
                        });

                    });

        </script>
        <script>
            $(function() {
                $("#data_inicio").datepicker();
                $("#data_fim").datepicker();

            });
        </script>
        <style type='text/css'>

                                                        body {
                                                            margin-top: 40px;
                                                            text-align: center;
                                                            font-size: 14px;
                                                            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
                                                        }

                                                        #loading {
                                                            position: absolute;
                                                            top: 5px;
                                                            right: 5px;
                                                        }
                                                        #novo a{
                                                            position: absolute;
                                                            top: 5px;
                                                            right: 330px;
                                                            background-color:green;
                                                            color:white;
                                                        }
                                                        #calendar {
                                                            width: 800px;
                                                            margin: 0 auto;
                                                        }

        </style>
    </head>
    <body>
        <form method="post" name="form">
            <p><label class="lbInput">Unidade</label>
                <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                    SELECT  * FROM unidades
                    order by desc_unidade
                </sql:query>
                <select id="id_unidade" name="id_unidade" class="required" onchange="submit()">
                    <option value="">Selecione uma unidade</option>
                    <c:forEach var="unidades" items="${query.rows}">
                        <c:set var="selected" value=""/>
                        <c:if test="${param.id_unidade==unidades.id_unidade}">
                            <c:set var="selected" value="selected"/>
                        </c:if>
                        <option value="${unidades.id_unidade}" <c:out value="${selected}"/>>${unidades.desc_unidade}</option>
                    </c:forEach>
                </select>
                <p><label class="lbInput">Sala</label>
                    <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                        SELECT  * FROM salas s
                        where id_unidade=?
                        <sql:param value="${param.id_unidade}"/>
                        order by desc_sala
                    </sql:query>
                    <select id="id_sala" name="id_sala" class="required">
                        <option value="">Todas</option>
                        <c:forEach var="sala" items="${query.rows}">
                            <c:set var="selected" value=""/>
                            <c:if test="${param.id_sala==sala.id_sala}">
                                <c:set var="selected" value="selected"/>
                            </c:if>
                            <option value="${sala.id_sala}" <c:out value="${selected}"/>>${sala.desc_sala} </option>
                        </c:forEach>
                    </select>
                </p>
                <p><label class="lbInput">Turno</label>
                    <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                        SELECT  * FROM turnos
                        where situacao_turno='A'
                        order by desc_turno
                    </sql:query>
                    <select id="id_turno" name="id_turno" class="required">
                        <option value="">Todos</option>
                        <c:forEach var="turno" items="${query.rows}">
                            <c:set var="selected" value=""/>
                            <c:if test="${param.id_turno==turno.id_turno}">
                                <c:set var="selected" value="selected"/>
                            </c:if>
                            <option value="${turno.id_turno}" <c:out value="${selected}"/>>${turno.desc_turno} </option>
                        </c:forEach>
                    </select>
                </p>
                <p>
                    <label class="lbInput">Data início</label>
                    <input id="data_inicio"  site="12" name="data_inicio" value="${param.data_inicio}"><br>
                    <label class="lbInput">Data fim</label>
                    <input id="data_fim" site="12" name="data_fim" value="${param.data_fim}"><br>
                    <input type="image" src="../imagens/procurar.png">
                </p>
                <script>
                    $(document).ready(function() {

                        var calendar  = $('#calendar');
                        calendar.fullCalendar( 'gotoDate', ${ano_inicio}, ${mes_inicio-1});
                    })
                </script>
            </p>
        <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
        <div id='loading' style='display:none'>carregando...</div>
        <div id='calendar'></div>
        <div><a href="javascript:window.print();">Imprimir</a></div>
    </body>
    
</html>
